import { Card, Descriptions, Space, Tag, Tooltip } from 'antd';
import React from 'react';
import { DataSourceType } from '@/services/dataSourceService';

interface Props {
  dataSource: DataSourceType.DataSource;
  loading?: boolean;
  actions?: React.ReactNode[];
}

/**
 * 数据源卡片组件
 * @constructor
 */
const DataSourceCard: React.FC<Props> = (props) => {
  const { dataSource, loading } = props;

  return (
    <Card
      hoverable
      loading={loading}
      actions={props.actions}
      style={{ marginBottom: 16 }}
    >
      <Descriptions column={1} title={dataSource.name}>
        <Descriptions.Item label="数据库类型">
          <Tag color="blue">{dataSource.dbType}</Tag>
        </Descriptions.Item>
        <Descriptions.Item label="连接地址">
          <Tooltip title={dataSource.url}>
            <span>{dataSource.url}</span>
          </Tooltip>
        </Descriptions.Item>
        <Descriptions.Item label="数据库名称">{dataSource.dbName}</Descriptions.Item>
        <Descriptions.Item label="用户名">{dataSource.username}</Descriptions.Item>
      </Descriptions>
    </Card>
  );
};

export default DataSourceCard;
